<template>
  <ekDialog v-model="ekVisiable" title="装柜" @submit="handleSubmit">
    <div style="padding-right: 20px">
      <div>
        <div class="flex mb-20" style="color: #999;background-color: #f5f5f5;padding: 10px;border-radius: 4px;">
            <div class="f-14 mt-4" >
              总包裹数：{{ orderList?.length || 0 }}
            </div>
            <div class="f-14 mt-4 ml-20" >
              总用户数：{{ userList?.length || 0 }}
            </div>
        </div>
        <div
          class="submit-item"
          v-if="outboundList?.length && !loading"
          style="text-align: left"
        >
          <template v-for="(detail, index) in outboundList" :key="index">
            <div class="flex ">
              <div
               
                class="mt-15"
              >
                <div class="f-14" style="color: #333">
                  出库单号：{{ detail.transfer_outbound_no }}
                </div>
                <div class="f-12 mt-4" style="color: #999">
                  出库时间：{{
                    moment(Number(detail.transfer_outbound_time) * 1000).format(
                      "YYYY-MM-DD HH:mm"
                    )
                  }}
                </div>
                
              </div>
              <div
                class="f-12 mt-8 ml-20"
                style="padding-left: 20rpx; color: #999; display: flex"
              >
              
                <template v-if="detail.transfer_outbound_images?.length">
                  <el-image
                    v-for="(item, index) in detail.transfer_outbound_images"
                    :key="index"
                    style="width: 60px; height: 60px;border-radius: 4px;"
                    :src="$imageBaseUrl + item"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[$imageBaseUrl + item]"
                    :initial-index="0"
                    fit="cover"
                  />
                </template>
              </div>
            </div>
            <el-divider content-position="left">包含转运单</el-divider>

            <el-table :data="getTransferSubData(detail)" >
              <el-table-column type="expand">
                <template #default="props">
                  <div class="ml-30">
                    <p class="f-12 mt-8 ml-30">
                      转运单号： {{ props.row.transfer_no }}
             
                    </p>
          
                    <el-divider content-position="left">包含包裹</el-divider>
                    <div  style="padding: 0 20px">
                    <el-table
                      ref="table"
                      stripe
                      :data="getSubData(props.row)"
                     
                      :border="false"
                    >
                      <el-table-column
                        prop="order_logistic_no"
                        label="快递单号"
                      ></el-table-column>
                      <el-table-column
                        prop="order_transport_type"
                        label="包裹类型"
                      >
                        <template v-slot="scope">
                          {{
                            getLable(
                              transportType,
                              scope.row.order_transport_type
                            )
                          }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="order_good_length"
                        label="包裹尺寸(cm)"
                        width="140"
                      >
                        <template v-slot="scope">
                          {{ scope.row.order_good_length }} *
                          {{ scope.row.order_good_width }} *
                          {{ scope.row.order_good_height }}
                        </template>
                      </el-table-column>

                      <el-table-column
                        prop="order_good_weight"
                        label="体积(m³)"
                        width="140"
                      >
                        <template v-slot="scope">
                          {{
                            Number(
                              (scope.row.order_good_width *
                                scope.row.order_good_height *
                                scope.row.order_good_length) /
                                1000000
                            ).toFixed(3)
                          }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="order_good_weight"
                        label="货品重量(kg)"
                        width="140"
                      ></el-table-column>
                      <el-table-column prop="manage_account" label="入库员">
                        <template v-slot="scope">
                          {{ scope.row.manage_account }}
                          <span
                            style="color: #999"
                            v-if="scope.row.order_inbound_manage"
                            >（{{ scope.row.order_inbound_manage }}）</span
                          >
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="order_inbound_time"
                        label="入库时间"
                        width="160"
                      >
                        <template v-slot="scope">
                          {{ scope.row.order_inbound_time }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="order_inbound_images"
                        label="入库图片"
                      >
                        <template v-slot="scope">
                          <template
                            v-if="scope.row.order_inbound_images?.length"
                          >
                            <el-image
                              @click="
                                handleShowImage(scope.row.order_inbound_images)
                              "
                              :teleported="true"
                              v-for="(item, index) in scope.row
                                .order_inbound_images"
                              :key="index"
                              style="width: 100px; height: 100px"
                              :src="$imageBaseUrl + item"
                              :zoom-rate="1.2"
                              :max-scale="7"
                              :min-scale="0.2"
                              fit="cover"
                            />
                          </template>
                        </template>
                      </el-table-column>
                    </el-table>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="转运单号" prop="transfer_no" width="250">
              </el-table-column>
              <el-table-column label="运输方式" prop="transfer_mode">
                <template #default="scope">
                  {{ getLable(transportMode, scope.row.transfer_mode) }}
                </template>
              </el-table-column>
              <el-table-column label="用户编号" prop="user_nick">
                <template #default="scope">
                  {{ scope.row.user_id }}
                  <span v-if="scope.row.user_nick">{{
                    scope.row.user_nick
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="金额"
                prop="transfer_price"
              ></el-table-column>
            </el-table>

            <!--  -->
          </template>
        </div>
      </div>
      <div class="ek-form mt-15" v-loading="loading">
        <el-form
          :model="form"
          :rules="rules"
          label-width="160px"
          ref="forms"
          label-position="top"
          v-if="!loading"
        >
          <el-form-item prop="cabinet_number" label="柜号">
            <ekInput v-model="form.cabinet_number" placeholder="请输入柜号" />
          </el-form-item>

        </el-form>
      </div>
    </div>
  </ekDialog>
</template>

<script setup>
import {
  watch,
  getCurrentInstance,
  computed,
  reactive,
  ref,
  defineEmits,
  onMounted,
} from "vue";
import { apis } from "../data.js";
import ekDialog from "@/components/business/ekDialog/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekSelect from "@/components/form/ekSelect/index.vue";
import ekTableSelect from "@/components/form/ekTableSelect/index.vue";
import ekSelectModel from "@/components/form/ekSelectModel/index.vue";
import ekUploadImage from "@/components/form/ekUploadImage/index.vue";
import ekTip from "@/components/business/ekTip/index.vue";
import { objectAssignment, getLable } from "@/utils/common.js";

import { getDimensionByCode } from "@/utils/sys.js";
import moment from "moment";

const props = defineProps({
  // 显示隐藏
  visiable: {
    type: Boolean,
    default: false,
  },
  rowArr: {
    type: Array,
    default: "",
  },
});
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http, $ekLoading, $ekMessage, $uploadUrl } =
  globalProperties;

const emit = defineEmits(["update:visiable", "submit"]);

// 是否显示
const ekVisiable = computed({
  get() {
    return props.visiable;
  },
  set(value) {
    emit("update:visiable", value);
  },
});
const outList = computed(() => {
  return props.rowArr;
});
function handleSubmit(done) {
  let url = apis.cabinet;

  let imgs = [];
  if (form.value.order_outbound_images) {
    imgs = JSON.parse(form.value.order_outbound_images).map(
      (item) => item.path
    );
  }
  forms.value.validate((valid) => {
    if (valid) {

       let arr = props.rowArr.map((item) => item.transfer_outbound_no);
  const outbound_nos = [...new Set(arr)];
      $http
        .request({
          url: url,
          method: "PUT",
          data: {
            cabinet_number: form.value.cabinet_number,
            outbound_nos: outbound_nos,
          },
        })
        .then((res) => {
          $ekMessage.success(res.message);
          emit("submit", done);
        })
        .catch((err) => {});
    }
  });
}
const loading = ref(false);
let forms = ref(null);
let form = ref({});
const initData = () => {
  form.value = {
    cabinet_number: "",
  };
};

const getSubData = (item) => {
  console.log(item, "item");
  let list = orderList.value.filter((detail) => {
    return detail.transfer_id == item.id;
  });
  console.log(list, "ggggggggggggg");
  return list?.length ? list : [];
};
const getTransferSubData = (item) => {
  let list = transferList.value.filter((detail) => {
    return detail.transfer_outbound_no == item.transfer_outbound_no;
  });
  console.log(list, "ggggggggggggg");
  return list?.length ? list : [];
};
let rules = reactive({
  cabinet_number: [
    { required: true, message: "请输入柜号", trigger: "blur" },
  ],
});


let orderList = ref([]);
let transferList = ref([]);
let outboundList = ref([]);
let userList = ref([]);
const transportType = ref({});
const transportMode = ref({});
const payState = ref({});

// 初始化表单
async function init() {
  loading.value = true;
  // 详情或者编辑
  let arr = props.rowArr.map((item) => item.transfer_outbound_no);
  const outbound_nos = [...new Set(arr)];
  let res = await $http.get(apis.getOutboundDeatil, {
    params: {
      outbound_nos: outbound_nos,
    },
  });
  transportType.value = res.data.type;
  transportMode.value = res.data.mode;
  orderList.value = res.data.order_list;
  transferList.value = res.data.transfer_list;
  outboundList.value = res.data.outbound_list;
  userList.value = res.data.user_list;
  loading.value = false;
}
watch(
  () => props.visiable,
  async (val) => {
    if (val) {
      initData();
      await init();
    }
  }
);
onMounted(async () => {
  let res = await getDimensionByCode("DIM_PAY_STATE");

  payState.value = res.map((item) => ({
    label: item.dimension_name,
    value: item.dimension_code,
  }));
});
</script>

<style scoped lang="scss"></style>
